var c = document.getElementById('c');
var ctx = c.getContext('2d');
var radius;

window.addEventListener('resize', handleWindowResize, false);
function handleWindowResize(e) {
    c.width = window.innerWidth * window.devicePixelRatio;
    c.height = window.innerHeight * window.devicePixelRatio;
    radius = c.width / 2;
}
handleWindowResize();

ctx.lineWidth = .5;
ctx.font = '128px Comic-sans';

//绘制文字
function drawText() {
    ctx.save();
    ctx.shadowColor = 'rgba(100, 100, 150, .8)';
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur = 10;

    ctx.fillStyle = 'cornflowerblue';
    var measure = ctx.measureText('HTML5');
    ctx.fillText('HTML5', c.width / 2 - measure.width / 2, c.height / 2 - 64);
    ctx.strokeStyle = 'yellow';
    ctx.strokeText('HTML5', c.width / 2 - measure.width / 2, c.height / 2 - 64);
    ctx.restore();
}

//填充背景
function fillCanvas(color) {
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, c.width, c.height);
}

//设置剪辑区域
function setClippingRegion(radius) {
    ctx.beginPath();
    ctx.arc(c.width / 2, c.height / 2, radius, 0, Math.PI * 2, false);
    ctx.clip();
}

function drawAnimationFrame(radius) {
    setClippingRegion(radius);
    fillCanvas('red');
    drawText();
}

(function animate() {
    var id = requestAnimationFrame(animate);
    fillCanvas('blue');
    // drawText();
    radius -= c.width / 100;
    if(radius > 0) {
        ctx.save();
        var id = drawAnimationFrame(radius);
        ctx.restore();
    } else {
        cancelAnimationFrame(id);
    }
})();